<template>
  <div>
    <h3 class="title">用户管理</h3>

<!--    <el-input v-model="inputValue" placeholder="请输入用户名" clearable style="width: 200px;"></el-input>-->
<!--    <el-button type="primary" class="el-icon-search" size="small" style="margin-left: 10px">查询</el-button>-->
    <el-button type="primary" class="el-icon-circle-plus-outline" size="small" @click="addUser">新增用户</el-button>
    <el-table
        class="InfoData"
        :data="userData"
        :header-cell-style="this.$handleheader"
        :row-style="this.$rowstyle"
        :cell-style="this.$cellstyle"
        border
    >
<!--      <el-table-column-->
<!--          prop="user_id"-->
<!--          label="用户账号"-->
<!--          header-align="center"-->
<!--          width="220"-->
<!--      >-->
<!--      </el-table-column>-->
      <el-table-column
          prop="user_name"
          label="用户名称"
          header-align="center"
      />

      <el-table-column
          prop="user_mail"
          label="联系方式"
          width="220"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="login_time"
          label="上次登录时间"
          width="220"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="user_role__role_name"
          label="角色"
          width="220"
      >
      </el-table-column>
      <el-table-column
          label="操作"
          header-align="center"
          align='center'
          width="120"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="editUser(scope.row)">修改</el-button>
          <el-button type="text" @click="delUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        :title="userMode"
        :visible.sync="userDialog"
        width="30%"
        :show-close=false>
      <el-form ref="userForm" :rules="rules" :model="userForm" label-width="100px">
<!--        <el-form-item label="用户账号" prop="user_id">-->
<!--          <el-input v-model="userForm.user_id"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="用户名称" prop="user_name">
          <el-input v-model="userForm.user_name"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="user_password">
          <el-input v-model="userForm.user_password"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="mail">
          <el-input v-model="userForm.user_mail"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" prop="user_role">
<!--          <el-input v-model="userForm.user_role"></el-input>-->
          <el-select v-model="userForm.user_role" clearable placeholder="请选择角色">
            <el-option
                v-for="item in userOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="userDialog = false">取 消</el-button>
    <el-button type="primary" @click="addOrEditInfo('userForm')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {userAdd, userDel, userEdit, userList} from "@/api/user";
import moment from "moment";

export default {
  // TODO 用户基础信息
  name: "userManager",
  data() {
    return {
      userDialog:false,
      userMode:'',
      userOptions:[{
        value:'1',
        label:'管理员'
      },
        {
          value:'2',
          label:'普通用户'
        }],
      userData: null,
      userForm:{
        user_id:'',
        user_name:'',
        user_mail:'',
        user_role:'',
        user_password : ''
      },
      rules: {
        user_password: [
          {required: true, message: '请输入用户密码', trigger: 'blur'},
        ],
        user_name: [
          {required: true, message: '请输入用户账号', trigger: 'blur'},
        ],
        user_role: [
          {required: true, message: '请选择用户角色', trigger: 'blur'},
        ],
        user_mail: [
          {required: true, message: '请输入用户邮箱', trigger: 'blur'},
        ],
      },
      inputValue:''
    }
  },
  methods: {
    editUser(row){
      this.userMode ='用户信息修改'
      this.userDialog = true
      this.userForm = JSON.parse(JSON.stringify(row))
    },
    addUser(){
      this.userMode ='用户信息新增'
      this.userDialog = true
      // this.userForm.user_id =''
      this.userForm.user_mail=''
      this.userForm.user_name=''
      this.userForm.user_role=''
      this.userForm.user_password = ''
    },
    addOrEditInfo(userForm){
      //调接口
      this.$refs[userForm].validate((valid) => {
        if (valid) {
          if (this.userMode === '用户信息新增'){
            userAdd(this.userForm).then(res=>{
            // axios.post(this.$ip2 + '/user/add/',this.userForm).then(res=>{
              if (res.data === '用户新增成功') {
                this.$message({
                  type:'success',
                  message :'用户新增成功'
                })
                this.initData()
                this.userDialog = false
              }else {
                this.$message.error("用户新增失败！存在字段重复，请检查！")
              }
            })
          }
          else {
            userEdit(this.userForm).then(res=>{
            // axios.post(this.$ip2 + '/user/edit/',this.userForm).then(res => {
              if (res.data === '用户修改成功'){
                this.$message({
                  type:'success',
                  message :'用户修改成功'
                })
                this.initData()
              }else{
                this.$message.error("用户修改失败！存在字段重复，请检查！")
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    delUser(row) {
      this.$confirm('确定要删除吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        userDel(row.user_id).then(res=>{
        // axios.get(this.$ip2 + '/user/del/?user_id=' + row.user_id).then(res=>{
          if(res.data === '用户删除成功'){
            this.$message({
              type:'success',
              message :'用户删除成功'
            })
            this.initData()
          }else{
            this.$message({
              type:'error',
              message :'用户删除失败'
            })
          }
        })
      }).catch(()=>{
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })

    },
    initData() {
      userList().then(res=>{
      // axios.get(this.$ip2 + '/user/all').then(res=>{
        this.userData = res.data
        for (let i =0;i<res.data.length;i++){
          console.log(res)
          res.data[i].login_time = moment(res.data[i].login_time).format('YYYY-MM-DD HH:mm:ss')
        }
      })
}
  },
  mounted() {

  },
  created() {
    this.initData()
  }
}
</script>

<style scoped>

</style>
